<style scoped="scoped">
	.content_bottom{
		height: calc(100vh - 184px);
	}
</style>
<template>
  <div class='spotMonitor' style="min-width:955px;">
	  <div class="main-box" style="padding:10px;margin-bottom:10px;">
	    <remote-data ref="remote" :sendObj="searchFactor" @initCallback = "initPage"  @cancelOperate="queryData(1)"></remote-data>
      <span style="margin-left:20px;">告警类型：</span>
        <el-select v-model="searchFactor.type" @change="queryData(1)" placeholder="请选择">
          <el-option label="设备告警" :value="1"></el-option>
          <el-option label="模块告警" :value="2"></el-option>
          <el-option label="dtu告警" :value="3"></el-option>
          <el-option label="dtu离线" :value="4"></el-option>
        </el-select>
      <span style="margin-left:20px;">处理状态：</span>
        <el-select v-model="searchFactor.status" @change="queryData(1)" placeholder="请选择">
          <el-option label="未处理" :value="0"></el-option>
          <el-option label="已处理" :value="1"></el-option>
          <!--<el-option label="系统误报" :value="2"></el-option>-->
        </el-select>
	      <el-button class="ml10" type="primary"  @click.native="queryData(1)">搜索</el-button>
	  </div>
    <el-row class="content_bottom" ref="tableWrapper">
      <el-table
        v-if="tableData.length > 0"
        :height="tableHeight"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          width="160px"
          prop="updateTime"
          label="时间">
        </el-table-column>
        <el-table-column
          width="80px;"
          label="类型">
          <template slot-scope="data">
            <div v-if="data.row.type == 1">设备告警</div>
            <div v-if="data.row.type == 2">模块告警</div>
            <div v-if="data.row.type == 3">dtu模块告警</div>
            <div v-if="data.row.type == 4">dtu离线</div>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          prop="device.deviceCode"
          label="设备编码">
        </el-table-column>
        <el-table-column
          width="150px"
          prop="device.deviceName"
          label="设备名称">
        </el-table-column>
        <el-table-column
          v-if="searchFactor.type == 1"
          prop="point.name"
          label="所属测点">
        </el-table-column>
        <el-table-column
          prop="project.name"
          label="所属项目">
        </el-table-column>
        <el-table-column
          width="210px"
          prop="name"
          label="告警内容">
        </el-table-column>
        <el-table-column label="操作" width="80px" v-if="searchFactor.type == 1">
          <template slot-scope="data">
            <el-button type="text" v-if="data.row.point" size="mini" @click="handleClick(data)"><i class="el-icon-search"></i>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="tableData.length > 0" class="page_sub" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     :page-sizes="[10,20,30,40,50,60]"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
      <no-data v-if="tableData.length == 0"></no-data>
    </el-row>
    <el-dialog
      v-dialogDrag
      title="测点与曲线分析"
      :visible.sync="analysisModal"
      width="1200px"
      height="100%"
      class="line_analysis"
      top>
      <div v-if="analysisModal">
        <line-analysis :currentParams="currentParams"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    props:['type'],
	components: {
	  	remoteData: () => import('./remoteData'),
	},
    name:'abnormalDevice',
    data() {
    	let _this = this;
      return {
        analysisModal:false,
        currentParams:{},
        tableHeight:null,
      	projectTypeList:[],
        //  Table 配置start
	      searchFactor: {
          projectId:'',
          type:1,
          status:0
	      },
        tableData: [],
        page:1,
        size:60,
        total:0,
	      // Table 配置end
      }
    },
    activated(){
      let _this = this;
      window.onresize = function(){
        _this.tableHeight = _this.$refs.tableWrapper.$el.offsetHeight - 66
      }
    },
    deactivated(){
      window.onresize = null
    },
    mounted() {
      let _this = this;
      this.tableHeight = this.$refs.tableWrapper.$el.offsetHeight - 66
      console.log(this.tableHeight)
      window.onresize = function() {
        _this.tableHeight = _this.$refs.tableWrapper.$el.offsetHeight - 66
      }
      if(this.type){
        this.searchFactor.type = this.type
        this.searchFactor.status = 0
      }
    },
    destroyed(){
      window.onresize = null
    },
    computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters([
        'projectInfo'
      ])
    },
    methods:{
      handleClick(data){
        //调用查询接口查找数据
        // this.$httpBase.get("IOT-SERVER-ES-QUERY/es/esPoint/getLastOne?hideLoadding=1&pointId="+data.row.pointId+"&orderByCondition={createTime:'desc'}").then(res => {
          let phy = data.row.point.physicalQuantities.map(item => item.origin)
          this.currentParams = {
            projectId:data.row.projectId,
            pointCode:data.row.point.pointCode,
            pointName:data.row.point.name,
            pointId:data.row.pointId,
            // data_time:res.data[0].createTime,
            level:1,
            phy:phy.join(','),
            currentPhys:''
          }
          this.analysisModal = true
        // })
      },
      handleSizeChange(size){
        this.size = size;
        this.page = this.page;
        this.queryData()
      },
      handleCurrentChange(page){
        this.page = page;
        this.size = this.size;
        this.queryData()
      },
      initPage(projectList){
        if(projectList.length){
          this.searchFactor.projectId = ''
        }
        this.queryData()
      },
      queryData(page){
        if(page){
          this.page = page
        }
        let sendobj = {
          "andCondition":{
            "projectId":this.searchFactor.projectId,
            "type":this.searchFactor.type,
            "status":this.searchFactor.status
          },
          "orderByCondition":{
            createTime:'desc'
          },
          "pageObj": {
            "current": this.page,
            "size": this.size
          }
        }
        this.$httpProj.post("alert/alertDevice/page",sendobj).then(res => {
          this.tableData = res.data.list
          this.total = res.data.totalElements
        })
      }
    }
  }
</script>
